<template>
  <div class="app">
    <h3>{{msg}}</h3>
     <School :getSchoolName="getSchoolName"/>

     <!-- // 通过父组件给子组件绑定一个自定义事件实现子给父传递数据(第一种写法,使用@或v-on) -->
     <!-- <Student v-on:guigu="getStudentName"/> -->
     <Student @guigu="getStudentName"/>
  </div>
</template>

<script>
// 组件间通信的方式,适用于:子组件 ===> 父组件    第一种传递方法，props 父组件先创建函数
// 组件的自定义事件: 组件间通信的方式,适用于:子组件 ===> 父组件
// 触发自定义事件this.$emit('事件名',数据)
// 组件上也可以绑定原生DOM事件,需要使用native修饰符 @click.native="show" 

//   引入组件
import School from './components/School'
import Student from './components/Student'
  export default {
    name: 'App',
    components: {
        School, Student
    },
    data() {
      return {
        msg: "乘风破浪会有时"
      }
    },
    methods: {
      getSchoolName(name){
        console.log("App收到了学校名称", name)
      },
      getStudentName(name){
        console.log("App收到了学生名称", name)
      }
    },
}
</script>

<style>
  .app{
    background: rgb(136, 0, 255);
    padding: 1px;
  }
</style>